<template>
    <div class="toggle-switch" @click="toggle">
        <div class="switch" :class="{ 'on': isOn }"></div>
    </div>
</template>

<script>
import { defineComponent, ref, computed } from 'vue';

export default defineComponent({
    name: 'SoloistSwitch',
    emits: ['switchToggle'],
    setup(props, { emit }) {
        const isOn = ref(true);

        const toggle = () => {
            isOn.value = !isOn.value;
            emit('switchToggle', isOn.value);
        };

        return {
            isOn,
            toggle
        };
    }
});
</script>

<style scoped>
.toggle-switch {
    display: inline-block;
    cursor: pointer;
    user-select: none;
}

.switch {
    width: 60px;
    height: 120px;
    background-image: url('@/assets/switch-down.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    border-radius: 0;
}

.switch.on {
    background-image: url('@/assets/switch-up.png');
}
</style>